<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>06-Promise的api</title>
</head>

<body>
  <script>
    //#region 
    /* 1. Promise 构造函数：new Promise(executor)
        executor 函数：是同步执行的，(resolve, reject) => { }
        resolve 函数：调用 resolve 将 Promise 实例内部状态改为成功(fulfiled)。
        reject 函数：调用 reject 将 Promise 实例内部状态改为失败(rejected)。
        说明：executor 函数会在 Promise 内部立即同步调用，异步代码放在 executor 函数中。

    2. Promise.prototype.then 方法：Promise 实例.then(onFulfilled, onRejected)
        onFulfilled：成功的回调函数 —— (value) => { }
        onRejected：失败的回调函数 —— (reason) => { }
        注意：then 方法会返回一个新的 Promise 实例对象。 */

    /* 3.Promise.prototype.catch(onRejected) 方法
        (1) onRejected 函数: 失败的回调函数(reason) => { }
          说明: then()的语法糖, 相当于: then(undefined, onRejected)
        (2) 异常穿透使用: 当运行到最后, 没被处理的所有异常错误都会进入这个方法的回调函数中 */
    /* const promise = new Promise((resolve, reject) => {
      reject(new Error('失败原因'));
    });
    // promise.then(
    //   undefined,  //成功的回调可以是undefined
    //   (reason) => { console.log(`失败原因：${reason}`); }  //失败的回调必须有，否则会报错
    // );
    // then()的语法糖
    promise.catch((reason) => { console.log(`失败原因：${reason}`); }) */

    /* 
    // 关于then()的成功回调为undefined问题
    new Promise((resolve, reject) => {
      resolve('成功的value');
    }).then(
      undefined,    //成功的回调undefined，但是Promise底层做了处理，加上了成功回调 value => value
      (reason) => { console.log('失败原因：', reason); }
    ).then(
      (value) => { console.log('成功的value：', value); },
      (reason) => { console.log('失败原因：', reason); }
    ) */

    //#endregion


    //#region
    /* 4. Promise.resolve(value) 方法
        (1) value: 1）非 Promise 值，例如数组，字符串等等。2）Promise 值。
          说明: 当value是非 Promise 值或者 fulfilled状态的 Promise 对象，返回一个成功 Promise 对象；当value是一个 rejected状态的 Promise对象，返回一个失败的Promise对象 。
        (2) 语法糖，相当于 new Promise((resolve, reject) => { resolve(value); })

    5. Promise.reject(reason) 方法
        (1) reason: 失败的原因
          说明: 返回一个失败的 promise 对象, 直接改变promise状态
        (2) 语法糖，相当于 new Promise((resolve, reject) => { reject(reason); }) */

    /* // const promise = Promise.resolve('成功');  //成功的value：成功
    // const promise = Promise.reject('失败');   //失败原因：失败

    // resolve -- resolve
    // const promise = Promise.resolve(Promise.resolve('ok'));   //成功的value：ok

    // resolve -- reject
    // const promise = Promise.resolve(Promise.reject('error'));   //失败原因：error

    // reject-- resolve
    // const promise = Promise.reject(Promise.resolve('ok'));   //失败原因：[object Promise]

    // reject-- reject
    const promise = Promise.reject(Promise.reject('error'));   //失败原因：[object Promise]

    promise.then(
      (value) => { console.log('成功的value：' + value); },
      (reason) => { console.log('失败原因：' + reason); }
    ); */
    //#endregion

    /* 6. Promise.all(promiseArr) 方法
      promiseArr: 包含 n 个 promise 的数组
      说明: 返回一个新的 promise, 只有所有的 promise`都成功才成功`且成功的value是所有promise成功的value的数组, 只要有一 个失败了就直接失败。
          并且只要检测到失败的，就立即返回失败的promise

    7. Promise.race(promiseArr) 方法
        promiseArr: 包含 n 个 promise 的数组
        说明: 返回一个新的 promise, `第一个完成`的 promise 的结果状态就是最终的结果状态,
          和all方法一样，获取到当`第一个完成`的 promise 的结果状态，就立即返回 */
    const p1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('ok1');
      }, 500)
    });
    const p2 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('ok2')
      }, 2000)
    });
    const p3 = new Promise((resolve, reject) => {
      // reject(new Error('失败原因'));
      resolve('ok3')
    });

    Promise.all([p1, p2, p3]).then(
      (value) => { console.log('成功的value：' + value); console.log(value instanceof Array); },
      (reason) => { console.log('失败原因：' + reason); }     //失败原因：Error: 失败原因
    );
    Promise.race([p1, p2, p3]).then(
      (value) => { console.log('成功的value：' + value); },
      (reason) => { console.log('失败原因：' + reason); }     //失败原因：Error: 失败原因
    )

  </script>
</body>

</html>